/**
 * 多选组件
 */
(function(window, angular, undefined){

	var component = angular.module('water.common.component.comMulitCheck',[]);
	
	component.directive("comMulitCheck", function($timeout) {
		  return { 
			require : "ngModel",
		    restrict: "E",        // 指令是一个元素 (并非属性) 
		    scope: {              // 设置指令对于的scope 
		      id: "@",          // id 值传递 （字符串，单向绑定）
		      uiType:"=uiType",
		      model:"=ngModel",
		      data: "=", //双向绑定
		      change:"&ngChange",
		      modelKeyName:'=modelKeyname',//支持复杂对象，把选中的键值绑定到这个key中
		      componentObject:"=componentObject",
		      singleKey:"@singleKey",//互斥key，选中了这个key其他的就自动清空
		      more:"@ngMore" //大于几个就显示更多按钮
		    }, 
		    template: function(element,attrs,$scope,b){
		    	if(attrs.uiType == 'checkbox'){
		    		return  '<div >'+
				      '<ul class="zs-data-sizer" style="float:left;">'+
				      ' <li ng-show="!needMore || show || ($index <= more)" repeat-finish ng-finish="repeatFinish()" ng-repeat="item in data" ng-click="uiClick(item)" >'+
				      ' <label ><input style="vertical-align: middle;margin-right: 5px;" type="checkbox" ng-model="item.selected" />{{item.v}}</label>'+
				      '</li>'+
				      '</ul><a ng-click="moreClick()" ng-show="data.length>more" href="#" style="color: #908D8D;text-decoration: underline;float:left;padding: 3px 0px;">{{moreText}}</a></div>';
		    	}
		    	else{
		    		return  '<div >'+
				      '<ul class="zs-data-sizer" id={{id}} style="float:left;">'+
				      ' <li ng-show="!needMore || show || ($index <= more)" repeat-finish ng-finish="repeatFinish()" ng-repeat="item in data" ng-click="uiClick(item)" ng-class="isContain(item)?\'selected\':\'\'"><a href="#" >{{item.v}}</a></li>'+
				      '</ul><a ng-click="moreClick()" ng-show="data.length>more" href="#" style="color: #908D8D;text-decoration: underline;float:left;padding: 3px 0px;">{{moreText}}</a></div>';
		    	}
		    },
		    replace: true,        // 使用模板替换原始标记 
		    transclude: false,    // 不复制原始HTML内容 
		    link: function ($scope, element, attrs, controller) {
		    	
		    	$scope.selectModels = [];
		    	$scope.show = false;
		    	$scope.moreText = "展开>>";
		    	$scope.singleKey = attrs.singleKey;
		    	$scope.controller = controller;
		    	$scope.modelFlag = attrs.tag;
		    	/**
		    	 * 当前点击的项,方便在点击事件中反馈点击了哪个，是选择还是取消，方便做逻辑
		    	 */
		    	$scope.curClickModel;
		    	
		    	$scope.moreClick = function(){
		    		$scope.show=!$scope.show;
		    		if($scope.show){
		    			$scope.moreText = "收起<<";
		    		}
		    		else{
		    			$scope.moreText = "展开>>";
		    		}
		    	}
		    	
		    	try{
		    		/**
			    	 * 接口
			    	 */
			    	$scope.componentObject = {
			    			getSelectModel:function(){
			    				return $scope.selectModels;
			    			},
			    			setData : function(data){
			    				$scope.data = data;
			    				updateDataSelectedStatus();
			    				$scope.curClickModel = null;
			    			}
			    	};
		    	} catch (e) {
					console.log(e)
				}
		    	
		    	if($scope.more){
		    		$scope.needMore = true;//打开更多的控制
		    	}
		    	
		    	/**
		    	 * 获取model的值
		    	 */
		    	$scope.getModelValue = function(model){
		    		if($scope.modelKeyName){
		    			return model[$scope.modelKeyName];
		    		}
		    		else{
		    			return model;
		    		}
		    	}
		    	
		    	/**
		    	 * 选择事件
		    	 */
		    	$scope.uiClick = function(item){
		    		$scope.curClickModel = item;
		    		if(!$scope.model){
		    			$scope.model = [];
		    		}
		    		var model = angular.copy($scope.model);
		    		
		    		/**
		    		 * 如果选中的是互斥key，不管选中没选中，都执行这个逻辑
		    		 */
		    		if(item.k === $scope.singleKey){
		    			model = [];
		    			model.push(item.k);
		    			$scope.model = model;
		    			return;
	    			}
		    		
		    		/**
		    		 * 如果不是互斥key，则先确保互斥key不再被选中
		    		 */
		    		
		    		model.remove($scope.singleKey);
		    		
		    		if(item.selected){
		    			item.selected = false;
		    			$scope.curClickModel.selected = false;
		    			if($scope.modelKeyName){
		    				var obj = {};
		    				obj[$scope.modelKeyName] = item.k;
		    				model.remove(obj,$scope.modelKeyName);
		    			}
		    			else{
		    				model.remove(item.k);
		    			}
		    		}
		    		else{
		    			item.selected = true;
		    			$scope.curClickModel.selected = true;
		    			if($scope.modelKeyName){
		    				var obj = {};
		    				obj[$scope.modelKeyName] = item.k;
		    				model.push(obj);
		    			}
		    			else{
		    				model.push(item.k);
		    			}
		    		}
		    		
		    		$scope.model = model;
		    	}
		    	
		    	controller.$render = function(){
		    		if(!controller.$viewValue || !$scope.data){
		    			return;
		    		}
		    		
		    		$scope.model = controller.$viewValue;
		    		
		    		updateDataSelectedStatus();
		    		
		    		if($scope.change()){
		    			$scope.change()($scope.model,$scope.selectModels,$scope.curClickModel);
		    		}
		    	}
		    	
		    	function updateDataSelectedStatus(){
		    		
		    		if($scope.model == null){
		    			return;
		    		}
		    		
	    			$scope.selectModels = [];
		    		for(var i=0;i<$scope.data.length;i++){
		    			var dataItem = $scope.data[i];
		    			dataItem.selected = false;
		    			for(var j=0;j<$scope.model.length;j++){
		    				var modelItem =  $scope.model[j];
		    				if($scope.getModelValue(modelItem) == dataItem.k){
		    					dataItem.selected = true;
		    					$scope.selectModels.push(dataItem);
		    				}
		    			}
		    		}
		    		
		    	}
		    	
		    	$scope.isContain = function(item){
		    		return item.selected;
		    	}
		    }
		  } 
		});
}(window, angular));